<template>
    <el-container class="main-container">
        <el-header>
            <div>
                <img src="../assets/heima.png" />
                <span>后台管理系统</span>
            </div>
            <el-button type="info" round @click="loginOut">退出</el-button></el-header>
        <el-container>
            <el-aside width="isCollapse?200px:49px">
                <div class="collapse" @click="toggle">|||</div>
                <el-menu
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#409EFF"
                    unique-opened
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    router
                    
                    >
                    <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.authName}}</span>
                        </template>
                        <el-menu-item  :index="subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveItemPath('/'+subItem.path)">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{subItem.authName}}</span>
                                </template>
                             
                        </el-menu-item >
                    </el-submenu>
                    
                </el-menu>

                </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

 </template>    
<script>
export default {
    created(){
        this.getMenu()
        this.savePath = window.sessionStorage.getItem('savePath')
    },
    data(){
        return {
            menuList:[],
            isCollapse:false,
            savePath:''
        }
    },
    methods: {
        loginOut(){
            window.sessionStorage.removeItem('token')
            this.$router.push('/login')
        },
        getMenu(){
            this.$http.get('menus').then(
                req =>{
                   
                    if(req.data.meta.status !== 200)
                         return this.$menuList
                    this.menuList = req.data.data
                    
                },
                error =>{
                    console.log(error.message)
                }
            )
        },
        toggle(){
            this.isCollapse = !this.isCollapse
        },
        saveItemPath(savePath){
            window.sessionStorage.setItem('savePath',savePath)
            this.savePath = savePath
        }
    },
}
</script>

<style lang="less" scoped>
    .el-header {
        background-color: #373d41;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 20px;
        padding-left: 0px;
        > div {
            display: flex;
            align-items: center;
            span {
                margin-left: 15px;
            }
        }
    }
    .collapse{
        line-height: 30px;
        color: #fff;
        letter-spacing: 0.2em;
        cursor: pointer;
    }


    .el-aside {
        background-color: #333744;
        .el-menu{
            border-right: none;
        }
    }
    .el-main {
        background-color: #eaedf1;
    }

    .el-submenu,.el-menu-item{
        padding-left: 15px;
    }
    .main-container {
        height: 100%;
    }
</style>